<!--
 * @Descripttion: GGB
 * @version: 1.0
 * @Author: GGB
 * @Date: 2022-02-06 21:40:59
 * @LastEditors: GGB
 * @LastEditTime: 2022-02-08 06:12:10
-->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WebGL-002</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            overflow: hidden;
        }
    </style>
    <!-- <script type="x-shader/x_vertex" id="vshader_src">
        void main(){
            gl_Position = vec4(0.0,0.0,0.0,1.0);// 设置坐标
            gl_PointSize = 100.0;// 设置点的大小
        }
    </script>
    <script type="x-shader/x-fragment" id="fshader_src">
        void main(){
            gl_FragColor = vec4(1.0,0.0,0.0,1.0);// 设置颜色
        }
    </script> -->
    <script src="./axes.js"></script>
    <script src="./Misc.js"></script>
</head>

<body>
    <canvas id="canvas"></canvas>
    <script type="module">
        import * as shader_5 from "./shader_5.glsl.js";
        import { dat } from "../../libs/dat.gui.js";

        var clrArray = new Float32Array([1.0, 1.0, 1.0, 1.0]);

        var ctrl = new dat.GUI();
        var backgroundCtrlObj = { backColor: 0xffffff };
        var backgroundGroup = ctrl.addFolder("background");
        backgroundGroup.addColor(backgroundCtrlObj, "backColor")
            .onChange(function () {
                draw()
            })
        // .onChange(function (value) {
        //     //   value是一个颜色值
        //     var r = (value & 0xff0000) >> 16;
        //     var g = (value & 0xff00) >> 8;
        //     var b = (value & 0xff);

        //     gl.clearColor(r / 255, g / 255, b / 255, 1.0);
        //     gl.clear(gl.COLOR_BUFFER_BIT);
        //     // gl.drawArrays(gl.POINTS, 0, 1);
        // });
        // 第一步 获取canvas元素
        var cvs = document.getElementById("canvas");
        cvs.width = window.innerWidth;
        cvs.height = window.innerHeight;
        // 第二步 创建webgl绘图上下文
        const gl = cvs.getContext('webgl');
        // 设置上下文gl对象的视口与清除色，并清除画布
        gl.viewport(0, 0, cvs.width, cvs.height);
        gl.clearColor(0.0, 1.0, 1.0, 1.0);
        gl.clear(gl.COLOR_BUFFER_BIT);

        // 第四步 创建顶点缓冲区对象 获取顶点着色器代码字符串，创建顶点着色器对象，赋值，编译
        // var vshader_src = document.getElementById("vshader_src").innerHTML;
        var vshader_src = shader_5.vertex;
        var vshader = gl.createShader(gl.VERTEX_SHADER);
        gl.shaderSource(vshader, vshader_src);
        gl.compileShader(vshader);
        // 第五步 创建片元缓冲区对象 创建偏远着色器代码字符串，创建片元着色器对象，赋值，编译
        // var fshader_src = document.getElementById("fshader_src").innerHTML;
        var fshader_src = shader_5.fragment;
        var fshader = gl.createShader(gl.FRAGMENT_SHADER);
        gl.shaderSource(fshader, fshader_src);
        gl.compileShader(fshader);
        // 第六步 创建gl程序对象，将顶点着色器和片元着色器链接到程序对象
        var glProgram = gl.createProgram();
        gl.attachShader(glProgram, vshader);
        gl.attachShader(glProgram, fshader);

        // 第七步 链接着gl序对象
        gl.linkProgram(glProgram);
        // 第八步 将gl程序对象设置为当前渲染状态
        gl.useProgram(glProgram);

        ////////////////////////////////////////////////////////////////
        // 参考 https://developer.mozilla.org/zh-CN/docs/Web/API/WebGLRenderingContext/getAttribLocation
        var a_Position = gl.getAttribLocation(glProgram, "a_Position");
        var a_Color = gl.getAttribLocation(glProgram, "a_Color");
        var axes = new pgl_axes(gl, a_Position, a_Color, 100, 0xff0000, 0x00ff00, 0x0000ff, ctrl)

        // var axesCtrlObj = {
        //     length: 5,
        //     xColor: 0xff0000,
        //     yColor: 0x00ff00,
        //     zColor: 0x0000ff,
        // }
        // // 6个顶点坐标 18个浮点数
        // // x轴的起点 0.0,0.0,0.0 终点1.0,0.0,0.0 以此类推
        // var axesVerticles = new Float32Array([
        //     0, 0, 0, axesCtrlObj.length, 0, 0,
        //     0, 0, 0, 0, axesCtrlObj.length, 0,
        //     0, 0, 0, 0, 0, axesCtrlObj.length,

        // ]);
        // // xyz轴颜色
        // // x轴的起点颜色是红色 1.0,0.0,0.0 终点颜色与起点颜色一致1.0,0.0,0.0 以此类推
        // var axesColors = new Float32Array([
        //     1.0, 0.0, 0.0, 1.0, 0.0, 0.0,
        //     0.0, 1.0, 0.0, 0.0, 1.0, 0.0,
        //     0.0, 0.0, 1.0, 0.0, 0.0, 1.0,

        // ]);

        // // 创建存放并传递顶点坐标的数据buffer
        // var vAxesBuffer = gl.createBuffer();
        // // 创建存放并传递顶点颜色的数据buffer
        // var clrBuffer = gl.createBuffer();

        // var FSIZE = axesVerticles.BYTES_PER_ELEMENT; // 获取每个数组元素的字节数大小

        // gl.bindBuffer(gl.ARRAY_BUFFER, vAxesBuffer);
        // gl.bufferData(gl.ARRAY_BUFFER, axesVerticles, gl.STATIC_DRAW);
        // // 将顶点坐标数据传递给attribute变量
        // gl.vertexAttribPointer(a_Position, 3, gl.FLOAT, false, FSIZE * 3, 0);
        // // 启用attribute变量
        // gl.enableVertexAttribArray(a_Position);

        // gl.bindBuffer(gl.ARRAY_BUFFER, clrBuffer);
        // gl.bufferData(gl.ARRAY_BUFFER, axesColors, gl.STATIC_DRAW);
        // // 将顶点坐标数据传递给attribute变量
        // gl.vertexAttribPointer(a_Color, 3, gl.FLOAT, false, FSIZE * 3, 0);
        // // 启用attribute变量
        // gl.enableVertexAttribArray(a_Color);

        // gl.drawArrays(gl.LINES, 0, axesVerticles.length / 3);

        ////////////////////////////////////////////////////////////////



        //  第九步 正式开始绘制
        // gl.drawArrays(gl.POINTS, 0, 1);
        draw()
        function draw() {
            // var value = backgroundCtrlObj.backColor
            // var r = (value & 0xff0000) >> 16;
            // var g = (value & 0xff00) >> 8;
            // var b = (value & 0xff);
            ColorValueToColorArray(backgroundCtrlObj.backColor, clrArray)
            gl.clearColor(clrArray[0], clrArray[1], clrArray[2], clrArray[3]);
            gl.clear(gl.COLOR_BUFFER_BIT);
            gl.drawArrays(gl.POINTS, 0, 1);
            axes.draw()
        }
        renderScene()
        function renderScene() {
            draw()
            requestAnimationFrame(renderScene);
        }


        window.addEventListener("resize", resizeCanvas, false);
        function resizeCanvas() {
            cvs.width = window.innerWidth;
            cvs.height = window.innerHeight;
            gl.viewport(0, 0, cvs.width, cvs.height);
        }
    </script>

</body>

</html>